<template>
  <div>
    <h3> 课程列表</h3>
    <div>
      <el-button size="small" type="success" @click="$router.push('/courses/create')">
        创建课程
      </el-button>
    </div>
    <el-table :data="data" stripe style="width: 100%">
      <el-table-column v-for="(field,name) in fields" :key="name" :prop="name" :label="field.label"
        :width="field.width">
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template v-slot="{row}">
          <el-button size="mini" type="primary" @click="$router.push(`/courses/edit/${row._id}`)">编辑</el-button>
          <el-button size="mini" type="danger" @click="remove(row._id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
@Component({})
export default class CourseList extends Vue {
  data = []

  fields = {
    _id: { label: 'ID' },
    name: { label: '课程名称' },
    cover: { label: '课程封面图' },
  }
  $http: any
  async fetch() {
    const res = await this.$http.get('courses')
    this.data = res.data.data
    console.log(this)
  }
  async remove(id) {
    //取消会报错 所以我们捕获一下 让他不报错直接return
    try {
      await this.$confirm('是否确认删除')
    } catch (e) {
      return
    }

    const res = await this.$http.delete(`courses/${id}`)
    this.$message.success('删除成功')
    this.fetch()
  }
  created() {
    this.fetch()
  }
}
</script>

<style>
</style>
